<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/js/Grid/css/grid.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/Grid/js/grid.js"></script>
    <script src="/js/ace-1.4.2/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        window.addEventListener("message", evt => {
            var data = evt.data;
            table = data.table;
            loadCode();
        });
    </script>
    <style>
        .header {
            height: 30px;
            line-height: 30px;
            position: fixed;
            z-index: 9;
            background-color: #fff;
        }

        .header .tip {
            display: inline-block;
        }

        .btn {
            display: inline-block;
            height: 100%;
            border: 1px solid #2490F1;
            cursor: pointer;
            padding: 0px 10px;
            background-color: #fff;
            border-radius: 2px;
            width: 70px;
            text-align: center;
        }

        .btn:hover {
            background-color: #2490F1;
            color: #fff;
        }

        #editor {
            position: absolute;
            top: 40px;
            bottom: 70px;
            overflow: auto;
            width: 100%;
        }

        #copybtn[disabled] {
            background-color: hsla(120, 77%, 30%, .999) !important;
            color: #fff;
        }

        #copybtn:focus {
            outline: none;
        }
    </style>
</head>

<body>
    <div class="header">
        <span class="btn" id="copybtn">复制</span>
    </div>
    <pre id="editor"></pre>
    <script>
        var editor;
        window.onload = function () {
            editor = ace.edit("editor");
            editor.setOptions({
                autoScrollEditorIntoView: true,
                copyWithEmptySelection: true,
                fontSize: 18
            });
            editor.setTheme("ace/theme/sqlserver");
            editor.session.setMode("ace/mode/csharp");
            editor.setReadOnly(true);
        }
    </script>
    <script>
        var table;
        $(function () {
            $("#copybtn").click(evt => {
                var code = editor.getValue();
                var txt = document.createElement('textarea');
                txt.textContent = code;
                txt.classList.add('visually-hidden');
                document.body.appendChild(txt);
                txt.select();
                try {
                    document.execCommand('copy');
                } catch (ex) {
                    return false;
                } finally {
                    document.body.removeChild(txt);
                }
                //按钮样式
                $(evt.target).attr("disabled", "disabled");
                $(evt.target).html("已复制");
                setTimeout(() => {
                    $(evt.target).removeAttr("disabled");
                    $(evt.target).html("复制");
                }, 1200);
            });
        });
        function loadCode() {
            showLoading();
            $.post("/api/mysqlmanage/GetTableCode", { table }, function (res) {
                data = res.data.trim();
                editor.session.setValue(data);
            }).always(hideLoading);
        }
    </script>
</body>

</html>